<template>
  <div class="mobile-wrapper">
    <ul class="category-group" ref="categoryGroupRef">
      <li class="slider" ref="sliderRef" :style="sliderStyle"></li>
      <li
        v-for="(item, index) in data"
        :key="item.id"
        :ref="itemRef"
        class="category-item"
        :class="{ active: categoryStore.index === index }"
        @click="itemClick(item, index)"
      >
        {{ item.name }}
      </li>
      <li class="iconfont breadcrumb" @click="clickBreadcrumb">&#xe676;</li>
    </ul>
    <m-popup v-model="isShowPopup">
      <div class="popup-wrapper">
        <h1>所有分类</h1>
        <ul class="popup-category-group">
          <li
            v-for="(item, index) in data"
            :key="item.id"
            class="popup-category-item"
            @click="itemClick(item, index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </m-popup>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import { useCategoryStore } from '@/store/category'

defineProps({
  data: Array
})

const categoryStore = useCategoryStore()

// ul数组
const categoryGroupRef = ref(null)
// li数组
const itemArr = []

const sliderStyle = ref({
  width: `54px`,
  height: '30px',
  transform: `translate3d(0,0,0)`
})

// 监听索引变化
watch(
  () => categoryStore.index,
  async (index) => {
    await nextTick()
    const left = itemArr[index].offsetLeft
    const width = itemArr[index].offsetWidth
    const height = itemArr[index].offsetHeight
    sliderStyle.value.width = `${width}px`
    sliderStyle.value.height = `${height}px`
    sliderStyle.value.transform = `translate3d(${left - 10}px,0,0)`
  },
  {
    immediate: true
  }
)

// ref函数
const itemRef = (el) => {
  if (el) {
    itemArr.push(el)
  }
}

// 点击li分类
const itemClick = (item, index) => {
  categoryStore.index = index
  categoryStore.currentCategory = item
  isShowPopup.value = false
}

// 点击导航栏
const isShowPopup = ref(false)
const clickBreadcrumb = () => {
  isShowPopup.value = true
}
</script>

<style lang="scss" scoped>
.mobile-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  background-color: #fff;
  .category-group {
    position: relative;
    display: flex;
    align-items: center;
    overflow-x: auto;
    color: $primary-text-color;
    padding-left: 10px;
    .slider {
      position: absolute;
      top: auto;
      left: auto;
      width: 0.8rem;
      height: 100%;
      border-radius: 0.1rem;
      background-color: rgb(24, 24, 27);
      z-index: -1;
      transition: all 0.3s;
    }
    .category-item {
      flex-shrink: 0;
      height: 100%;
      padding: 0 14px;
      line-height: 30px;
      font-size: 0.12rem;
      &.active {
        color: $light-text-color;
        transition: all 0.4s;
      }
    }
    .breadcrumb {
      position: sticky;
      right: 0;
      background-color: #fff;
      box-shadow: 1px 1px 20px 20px #fff;
      font-size: 0.25rem;
      margin-left: 10px;
    }
  }
}
.popup-wrapper {
  height: 100%;
  h1 {
    font-size: 0.25rem;
    padding-bottom: 0.1rem;
  }
  .popup-category-group {
    overflow-y: auto;
    height: 100%;

    .popup-category-item {
      font-size: 0.2rem;
      padding: 0.1rem 0;
    }
  }
}
</style>
